<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="内容" class="content">
        <VueEditor v-model="form.content" :editorToolbar="customBar" />
      </el-form-item>

      <el-form-item label="分类">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in categryList"
            :key="item.id"
            :label="item.id"
          >
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="封面">
        <el-upload
          :file-list="form.cover"
          :action="$axios.defaults.baseURL + '/upload'"
          :headers="{ Authorization: token }"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },

  created() {
    this.$axios({
      url: "/category",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    }).then((res) => {
      res.data.data.splice(0, 2);
      this.categryList = res.data.data;
    });
    if (this.$route.query.id) {
      this.$axios({
        url: "/post/" + this.$route.query.id,
      }).then((res) => {
        //处理富文本无法接受div的问题
        res.data.data.content = res.data.data.content.replace(/div/g, "p");

        //处理分类选项多选框需要的数字数组
        this.checkList = res.data.data.categories.map((item) => {
          return item.id;
        });
        // 处理封面图片的数据
        res.data.data.cover.map((img) => {
          // 解决了url 不全的问题
          if (img.url.indexOf("http") == -1) {
            img.url = this.$axios.defaults.baseURL + img.url;
          }
          // 解决 uid 相同的问题
          // 通过观察数据发现 id 是独一无二
          // 反而 uid 作为用来渲染的 key 每个都是1
          img.uid = img.id;

          return img;
        });
        console.log(res.data.data.content);
        this.form = res.data.data;
      });
    }
  },

  watch: {
    checkList() {
      this.form.categories = this.checkList.map((num) => {
        return {
          id: num,
        };
      });
    },
  },

  data() {
    return {
      //存放所有分类数组
      categryList: [],
      //组件要求的数字组成的数组
      checkList: [],
      token: localStorage.getItem("token"),
      content: "",
      customBar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"],
      ],

      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
    };
  },

  methods: {
    coverSuccess(res, file, fileList) {
      console.log("上传成功");
      //这里应该将当前的封面放入form当中
      //接口要求的是[{id:xxx}]
      //当前上传图片id在res.data.id里面

      // 现在这里的成功上传推送进 form.cover 的数据不仅仅
      // 用来发送 api 请求, 也会用来渲染上传组件, 单单一个 id 就不够
      // 还要有这个 file 用来显示
      // console.log(file);
      file.id = res.data.id;
      //    this.form.cover.push(file);
      this.form.cover.push(file);
      // console.log(id);
    },

    coverRemove(file, fileList) {
      //这里是删除图片后的回调
      //第二个参数可以接受到删除后的文件列表
      //直接赋值给用作文件列表的this.form.cover即可
      this.form.cover = fileList;
      console.log("删除成功");
    },

    onSubmit() {
      console.log(this.form);
      this.$axios({
        method: "post",
        url: "/post",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        data: this.form,
      }).then((res) => {
        console.log(res.data);
        //发布成功后跳转回文章列表页
        this.$router.push("/postlist");
      });
    },
  },
};
</script>


<style lang="less" scoped>
.content {
  /deep/ .el-form-item__content {
    line-height: 1;
  }
}
</style>